<template id="paymentRequest-update">
  <!-- 采购付款申请抽屉 -->
  <v-navigation-drawer v-if="isUpdateDrawerShown" v-model="isUpdateDrawerShown" :permanent="isUpdateDrawerShown" fixed temporary right width="80%" class="elevation-24">
    <v-form ref="updateForm" lazy-validation>
      <!-- 抽屉标题 -->
      <v-row>
        <span class="text-subtitle-1 font-weight-medium pa-6 pl-7">{{ticketType}}申请-编辑</span>
      </v-row>

      <!-- 抽屉内容 -->
      <v-card class="mx-4 mb-4" outlined>
        <v-row class="mt-0 px-4">

          <v-col cols="12" sm="4" md="4">
            <v-text-field class="jh-v-input" prefix="供货商" dense single-line filled v-model="updateItem.ticketContentRequest.customerInfo.customerName" :rules="validationRules.requireRules"></v-text-field>
          </v-col>
          <v-col cols="12" sm="4" md="4">
            <v-text-field class="jh-v-input" prefix="付款账号" dense single-line filled v-model="updateItem.ticketContentRequest.customerInfo.customerAccountNum" :rules="validationRules.requireRules"></v-text-field>
          </v-col>
          <v-col cols="12" sm="4" md="4">
            <v-text-field class="jh-v-input" prefix="所属银行" dense single-line filled v-model="updateItem.ticketContentRequest.customerInfo.customerBankName" :rules="validationRules.requireRules"></v-text-field>
          </v-col>
          <v-col cols="12" sm="4" md="4">
            <v-text-field class="jh-v-input" prefix="开户分行/支行" dense single-line filled v-model="updateItem.ticketContentRequest.customerInfo.customerBranchBankName" :rules="validationRules.requireRules"></v-text-field>
          </v-col>
          <v-col cols="12" sm="4" md="4">
            <v-text-field class="jh-v-input" prefix="付款账期(天)" dense single-line filled v-model="updateItem.ticketContentRequest.customerInfo.customerCollectionCycle" :rules="validationRules.requireRules"></v-text-field>
          </v-col>
          <v-col cols="12" sm="4" md="4">
            <v-text-field class="jh-v-input" prefix="地址" dense single-line filled v-model="updateItem.ticketContentRequest.customerInfo.customerAddress"></v-text-field>
          </v-col>
          <v-col cols="12" sm="4" md="4">
            <v-text-field class="jh-v-input" prefix="联系人" dense single-line filled v-model="updateItem.ticketContentRequest.customerInfo.customerContactPerson"></v-text-field>
          </v-col>
          <v-col cols="12" sm="4" md="4">
            <v-text-field class="jh-v-input" prefix="联系电话" dense single-line filled v-model="updateItem.ticketContentRequest.customerInfo.customerPhoneNum"></v-text-field>
          </v-col>
          <v-col cols="12" sm="4" md="4">
            <v-text-field class="jh-v-input" prefix="邮政编码" dense single-line filled v-model="updateItem.ticketContentRequest.customerInfo.customerPostalCode"></v-text-field>
          </v-col>
          <v-col cols="12" sm="12" md="4">
            <span class="jh-input-label">付款申请日期</span>
            <v-menu :nudge-right="40" transition="scale-transition" offset-y min-width="auto" >
              <template v-slot:activator="{ on, attrs }">
                <v-text-field :rules="validationRules.requireRules" dense single-line filled v-model="updateItem.ticketContentRequest.paymentRequestAt" label="" readonly v-bind="attrs" v-on="on" ></v-text-field>
              </template>
              <v-date-picker locale="zh"  v-model="updateItem.ticketContentRequest.paymentRequestAt"></v-date-picker>
            </v-menu>
          </v-col>
          <v-col cols="12">
            <span class="jh-input-label">{{ticketType}}信息</span>
            <v-card elevation="0">
              <v-data-table :headers="headers" :items="[updateItem.ticketContentRequest]" :loading="isTableLoading" hide-default-footer 
                class="elevation-0 mt-0 mb-xs-4 flex-fill d-flex flex-column">
                <template v-slot:item.payment-order="{ item }">
                  {{item.paymentId}}
                </template>
                <template v-slot:item.deduction-amount="{ item }">
                  <v-text-field prefix="¥" class="jh-v-input mr-2" dense filled single-line v-model.number="item.deductionAmount" :rules="validationRules.requireRules" type="number"> </v-text-field>
                </template>
                <template v-slot:item.payment-total-amount="{ item }">
                  {{item.paymentTotalAmount | formatMoney}}
                </template>
                <template v-slot:item.payment-paid-amount="{ item }">
                  {{item.paymentPaidAmount | formatMoney}}
                </template>
              </v-data-table>
            </v-card>
          </v-col>
        </v-row>
      </v-card>

      <!-- 抽屉操作按钮 -->
      <v-row class="justify-end mx-0 mt-8 px-6 align-center">
        <div v-if="updateItem.ticketStatus !== '申请'" class="mr-2"><v-icon size="16" class="mr-1 warning--text">mdi-alert-circle-outline</v-icon>工单【{{updateItem.ticketStatus}}】，不可提交</div>
        <v-btn color="success" @click="doUiAction('updateItem')" small :disabled="updateItem.ticketStatus !== '申请'">提交</v-btn>
        <v-btn class="elevation-0 ml-2" @click="isUpdateDrawerShown = false" small>取消</v-btn>
      </v-row>
    </v-form>
    <!-- 抽屉关闭按钮 -->
    <v-btn elevation="0" color="success" fab absolute top left small tile class="drawer-close-float-btn" @click="isUpdateDrawerShown = false">
      <v-icon>mdi-close</v-icon>
    </v-btn>
  </v-navigation-drawer>
</template>

<script type="module">
  Vue.component("paymentRequest-update", {
    template: '#paymentRequest-update',
    props: {
    },
    data: () => ({
      validationRules: {
        requireRules: [
          v => !!v || '必填',
        ],
        numberRules: [
          v => (!isNaN(v) && parseInt(v) > 0) || '数字必填'
        ]
      },
      constantObj: {},

      isTableLoading: false,
      headers: [
        { text: "账单编号", value: "payment-order", class: 'fixed', cellClass: 'fixed' },
        { text: "账单创建时间", value: "paymentCreateAt" },
        { text: "账单金额", value: "payment-total-amount" },
        { text: "已付款", value: "payment-paid-amount" },
        { text: "本次申请", value: "deduction-amount" },
      ],

      isUpdateDrawerShown: false,
      updateItem: {},
      updateActionData: {},
    }),
    async created() {
    },
    async mounted() {
    },
    computed: {
      ticketType() {
        return this.updateItem.ticketType || ''
      }
    },
    methods: {
      async doUiAction(uiActionId, uiActionData) {
        try { switch (uiActionId) {
          case 'startUpdateItem':
            await this.prepareUpdateFormData(uiActionData);
            await this.openUpdateDrawer();
            break;
          case 'updateItem':
            await this.prepareUpdateValidate();
            await this.confirmUpdateItemDialog();
            await this.prepareDoUpdateItem();
            await this.doUpdateItem();
            await this.closeUpdateDrawer();
            break;
          default:
            console.error("[doUiAction] uiActionId not find", { uiActionId });
            break;
        }} catch (error) { await window.jhMask.hide(); throw error; }
      },

      // ---------- 初始化数据 uiAction >>>>>>>>>> --------
      async prepareUpdateFormData(funObj) {
        this.updateItem = {
          ..._.cloneDeep(funObj),
          ticketContentRequest: JSON.parse(funObj.ticketContentRequest || '{}')
        };
      },
      async openUpdateDrawer() {
        this.isUpdateDrawerShown = true;
      },
      // ---------- <<<<<<<<<<< 初始化数据 uiAction ---------

      // ---------- 修改数据 uiAction >>>>>>>>>> --------
      async prepareUpdateValidate() {
        if (await this.$refs.updateForm.validate()) {
          return true;
        }
        await window.vtoast.fail("请完善表单信息");
        throw new Error("请完善表单信息")
      },
      async confirmUpdateItemDialog() {
        if (await window.confirmDialog({title: "提交", content: "确定提交吗？"}) === false) {
          throw new Error("[confirmUpdateFormDialog] 否");
        }
      },
      prepareDoUpdateItem() {
        const { ticketContentRequest, ...item } = this.updateItem;
        this.updateActionData = {
          ticketContentRequest: JSON.stringify({
            ...ticketContentRequest,
            paymentRequiredAt: dayjs(ticketContentRequest.paymentRequestAt).add(ticketContentRequest.customerInfo.customerCollectionCycle, 'day').format('YYYY-MM-DD'),
          }),
          ticketRequestAmount: ticketContentRequest.deductionAmount
        }
      },
      async doUpdateItem() {
        await window.vtoast.loading("提交数据");
        await window.jianghuAxios({
          data: {
            appData: {
              pageId: 'ticketManagement',
              actionId: 'updateItem',
              actionData: this.updateActionData,
              where: {
                ticketId: this.updateItem.ticketId
              }
            }
          }
        })
        await window.vtoast.success("提交成功");
      },
      async closeUpdateDrawer() {
        this.isUpdateDrawerShown = false;
        this.updateActionData = null;
        this.$emit("success");
      },
      // ---------- <<<<<<<<<<< 修改数据 uiAction ---------
    }
  })
</script>
<style>
  .jh-v-input .v-messages-outer, .jh-v-input .v-text-field__details {
    bottom: -15px !important;
  }
</style>
